<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src='./js/vue.js'></script>
<body>
    <div class='box'>
        <h1>{{num}}</h1>
        <button v-on:click = 'sum'>点击该按钮+1</button>
        <button v-on:click = 'num--'>点击该按钮-1</button>
        <button v-on:click = 'num = num * 2'>点击该按钮*2</button>
        <button @click="quyu">点击按钮 % 2</button>
        <br>
        <h1>test事件对象</h1>
        <button @click="testEvent">test事件对象</button>
        <h2>事件传入参数</h2>
        <button @click="chuancan('sss')">test传入参数</button>
        <h2>当传入实参时，事件对象如何接收</h2>
        <button @click="chuancanEvent('www',$event)">test传参 event</button>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                num:0
            },
            methods:{
                sum(){
                    console.log('111');
                    console.log(this);
                    this.num += 1;
                },
                quyu(){
                    this.num = this.num % 2
                },
                testEvent(event){
                    console.log(event);
                },
                chuancan(a){
                    console.log(a);
                },
                chuancanEvent(a,event){
                    console.log(a);
                    console.log(event)
                }
            },
        })
    </script>
</body>
</html>